import Layout from '@/Layout';
import { getWordsInfo } from '@/services/dashboard';
import { ProCard } from '@ant-design/pro-components';
import { Statistic } from 'antd';
import { useEffect, useState } from 'react';
import styles from './index.module.less';
const { Divider } = ProCard;

const Dashboard: React.FC = () => {
  const [wordsInfo, setWordsInfo] = useState({
    hitokoto: '',
    from: '',
  });

  useEffect(() => {
    (async function getWords() {
      const info = await getWordsInfo({ c: 'b', encode: 'json' });
      setWordsInfo({
        hitokoto: info.hitokoto,
        from: info.from,
      });
    })();
  }, []);

  return (
    <Layout>
      <ProCard direction="column" ghost gutter={[0, 20]}>
        <ProCard style={{ height: 540 }} layout="center">
          <img
            src="https://bing.img.run/rand.php"
            alt="随机获取Bing历史壁纸1080P高清"
            style={{
              display: 'block',
              height: '100%',
            }}
          />
        </ProCard>

        <ProCard gutter={16} ghost style={{ height: 200 }}>
          <ProCard colSpan={16}>
            <ProCard.Group title="网站概览" direction={'row'}>
              <ProCard>
                <Statistic title="文章总数" value={79.0} precision={2} />
              </ProCard>
              <Divider type={'vertical'} />
              <ProCard>
                <Statistic title="随记总数" value={112893.0} precision={2} />
              </ProCard>
              <Divider type={'vertical'} />
              <ProCard>
                <Statistic title="评论总数" value={93} suffix="/ 100" />
              </ProCard>
              <Divider type={'vertical'} />
              <ProCard>
                <Statistic title="阅读总数" value={112893.0} />
              </ProCard>
              <Divider type={'vertical'} />
              <ProCard>
                <Statistic title="标签总数" value={112893.0} />
              </ProCard>
            </ProCard.Group>
          </ProCard>
          <ProCard colSpan={8}>
            <div className={styles.gradient_text}>{wordsInfo.hitokoto}</div>
            <div className={styles.where_text}>——{wordsInfo.from}</div>
          </ProCard>
        </ProCard>
      </ProCard>
    </Layout>
  );
};

export default Dashboard;
